<template>
    <view>
		<view class="container">
			<u-sticky >
				<view class="sticky">
					<top-tab>
						<u-subsection 
						:list="list1" 
						:current="curNow"
						active-color="#abc270"
						bgColor="#abc270"
						inactive-color="#ffffff"
						@change="sectionChange" 
						class="subtar"
						style="margin: 0 auto;margin-top: 40rpx;"
						>
						</u-subsection>
					</top-tab>
					<view >
						<text class="date" @click="showSelection" style="margin-top: 75rpx;">{{date1}}</text>
						<image class="icon" @click="showSelection" src=""></image>
						<image class="icon" style="margin-left:46%; width: 46rpx; height: 46rpx;" src=""></image>
					</view>

			
					<u-tabs-swiper :list="list" 
					ref="tabs" 
					:show-bar="false"
					active-color="#fda769"
					inactive-color="#000000"
					:current="curNOW1"
					:barHeight= "4"
					style="margin-top: 25% auto; margin-left: 10% auto; "
					gutter="30"
					:class="{'u-tabs-scroll-box1':this.display}"
					>
					</u-tabs-swiper>
			
					<view class="day" :class="{'day1':this.display}" style="display: flex;flex-direction: row;">
						<view v-for="(item,i) in list3" style="margin-left: 8%;">
							<view style=" width: 20px;height: 20px;text-align: center;font-size: 37rpx; margin-left: 17.7%;font-family: 'Arial Normal', 'Arial', sans-serif;">{{item}}</view>
						</view>
						
					</view>
					<view class="line"></view>
				</view>
			</u-sticky>
		</view>
		
		
		
		<view v-show="this.curNow==1" style="z-index: 888;margin-top: 345rpx;">
			<uni-collapse @change="changeItem" v-for="(item,i) in D" >
			<uni-collapse-item :title="item.departmentname"  :thumb="getColer('green')" :show-animation="true" open="true">
				<view v-for="(item2,j) in item.staffes" class="uni-collapse-item-style" :style="j%2!=0 ? 'background-color: #f7f7f7;':'background-color: #ffffff;'">
					<view class="staffName">
						{{item2.staffname}}
					</view>
					<view class="staffTime">
						{{item2.startTime}}-{{item2.finishTime}}
					</view>
					<view class="arrow" @click="nexturl(item2.number)"></view>
				</view>
			</uni-collapse-item>
			<!-- <view class="line"></view> -->
		</uni-collapse>
		</view>
		
		<view class="grriding" v-show="this.curNow==0">
			<view class="li">
				<text class="time" style="margin-left: -12%;top: 83rpx;position: relative; ">00:00</text>
			</view>
			<view>
				<image class="ico" src=""></image>
			</view>
			<view>
				<text class="time" style="margin-left:  -12%;top: 94rpx;position: relative; ">06:00</text>
			</view>
			<view>
				<text class="time" style="margin-left: -12%;top: 158rpx;position: relative; ">07:00</text>
			</view>
			<view>
				<text class="time" style="margin-left: -12%;top: 218rpx;position: relative; ">08:00</text>
			</view>
			<view>
				<text class="time" style="margin-left: -12%;top: 280rpx;position: relative; ">09:00</text>
			</view>
			<view>
				<text class="time" style="margin-left: -12%;top: 340rpx;position: relative; ">10:00</text>
			</view>
			<view>
				<text class="time" style="margin-left: -12%;top: 400rpx;position: relative; ">11:00</text>
			</view>
			<view>
				<text class="time" style="margin-left: -12%;top: 470rpx;position: relative; ">12:00</text>
			</view>
			<view>
				<text class="time" style="margin-left: -12%;top: 530rpx;position: relative; ">13:00</text>
			</view>
			<view>
				<text class="time" style="margin-left: -12%;top: 590rpx;position: relative; ">14:00</text>
			</view>
			<view>
				<text class="time" style="margin-left: -12%;top: 650rpx;position: relative; ">15:00</text>
			</view>
			<view>
				<text class="time" style="margin-left: -12%;top: 715rpx;position: relative; ">16:00</text>
			</view>
			<view>
				<text class="time" style="margin-left: -12%;top: 775rpx;position: relative; ">17:00</text>
			</view>
			<view>
				<text class="time" style="margin-left: -12%;top: 835rpx;position: relative; ">18:00</text>
			</view>
			<view>
				<text class="time" style="margin-left: -12%;top: 895rpx;position: relative; ">19:00</text>
			</view>
			<view>
				<text class="time" style="margin-left: -12%;top: 960rpx;position: relative; ">20:00</text>
			</view>
			<view>
				<text class="time" style="margin-left: -12%;top: 1025rpx;position: relative; ">21:00</text>
			</view>
			<view>
				<text class="time" style="margin-left: -12%;top: 1087rpx;position: relative; ">22:00</text>
			</view>
			<view>
				<text class="time" style="margin-left:-12%;top: 1150rpx;position: relative; ">23:00</text>
			</view>
			<view>
				<text class="time" style="margin-left: -12%;top: 1213rpx;position: relative; ">24:00</text>
			</view>
			<view style="display: flex;flex-direction: row; margin-top: -810rpx;">
				<view  v-for="(item,i) in rosterColor" style="margin-top: 0rpx;">
					<view v-if="item.length==0">
						<view :style="{'display':'flex','flex-direction':'column','width': 90+'rpx','border-radius': 3+'px','opacity': 0.60,'height': 80+'px','margin-left':4+'rpx'}"><!-- {{item1.departmentname}} --></view>
					</view>
					<view v-else>
						<view v-for="(item1,j) in item.rosters" style="display: flex;flex-direction: row;">
							<uni-transition :show="true" :mode-class="modeClass1" duration="600">
								<view :style="{'display':'flex','border-top':4+'rpx','border-bottom':4+'rpx','border-color':item1.color,'flex-direction':'column','width': 90+'rpx','height': item1.hours*100+'rpx','background-color':item1.color+'80','margin-left':4+'rpx','margin-top':item1.startTime*165+'rpx','font-size':20+'rpx','color':'#ffffff','text-align':'center'}" @click="showToast(item1.departmentname)">{{item1.S}}-{{item1.F}}</view>
							</uni-transition>
							
						</view>
					</view>
					
				</view>
			</view>
			
		</view>
		
		<view>
				<u-calendar v-model="show" :mode="mode" @change="change" active-bg-color="#abd270" >
					<view slot="tooltip">
								<view class="title">
									
								</view>
							</view>
				</u-calendar>
			</view>
			<!-- :style="{'height':getClientHeight} -->
		<!-- <view v-show="this.curNow==0" class="colorful"  style="margin-left: 115rpx;" :style="{'height':ClientHeight0+'rpx',}"></view> -->
		<!-- <view v-show="this.curNow==0" class="colorful"  style="margin-left: 206rpx; margin-top: -460rpx;" :style="{'height':700+'rpx',}"></view> -->
		
		
	</view>
	
</template>
<script>
	import {getsingleRoster} from '../../api/Roster/getSingleRoster.js'
    export default{
		data(){
			return{
				list:[{
					name:"Sun.",
				},{
					name:"Mon.",
				},{
					name:"Tues.",
				},{
					name:"Wed.",
				},{
					name:"Thur.",
				},{
					name:"Fri.",
				},{
					name:"Sat.",
				}],
				list1:[{
					name:"Me"
				},{
					name:"Others"
				}],
				list3:[12,13,14,15,16,17,18],
				date1:"",//Dec 9th，2021
				curNow:0,
				modeClass1:"zoom-in",
				curNOW1:1,
				year:0,
				month:0,
				day:0,
				modalContent:"",
				showModal:false,
				test:12,
				aaa:null,
				show:false,
				display:false,//他人排班的展示页面
				rosterTime:"",
				mode: 'date',
				ClientHeight0:290,
				weekIndex:0,
				D:[],
				rosterColor:[],
			}
		},
		methods:{
			showToast(departmentname){
				uni.showToast({
					title:departmentname,
					icon:"none"
				})
			},
			getClientHeight(){
				// this.ClientHeight0=(this.rosterList[0].rostermany[0].hours)*90;
				// console.log(this.rosterList[1].rostermany[0].hours)
			},
			change(e) {//根据日期修改
				this.year=e.year;
				this.day=e.day;
				this.month=this.setMonth(e.month)
				this.date1=this.month+" "+this.day+", "+this.year;
				// console.log(this.date1)
				// console.log(e)
				let time=this.year+"-"+this.month+"-"+this.day+" "+"00:00:00";
				this.rosterTime=this.year+"-"+e.month+"-"+this.day
				this.highlight(time)
				this.getInterFace();
				this.getOtherInterFace();
			},
			initTime(){//初始化
				var data=new Date();
				this.year=data.getFullYear();
				this.day=data.getUTCDate();
				this.month=data.getMonth()+1;
				// console.log(data);
				this.date1=this.setMonth(data.getMonth()+1)+" "+this.day+", "+this.year;

				let time=this.year+"-"+this.month+"-"+this.day+" "+"00:00:00";
				this.rosterTime=this.year+"-"+this.month+"-"+this.day
				var weekDay = ['Sum.', 'Mon.', 'Tues.', 'Wed.', 'Thur.', 'Fri.', 'Sat.'];
				this.highlight(time)
			},
			
			highlight(time){
				let a=new Date(time).getTime()//时间戳
				// console.log(weekDay[(new Date(a)).getDay()])
				this.sectionChange1((new Date(a)).getDay())
				this.weekIndex=(new Date(a)).getDay()//设置高亮的星期
			},
			//接个人排班的接口的地方
			getInterFace:function(){
				return new Promise((resolve,reject)=>{
					const _this = this;
					uni.request({
						url:"http://47.99.124.245:8008/arrange/screen",
						method:'POST',
						data:{number:31,departmentid:0,managernumber:0,date:_this.rosterTime},
						header:{
							'content-type': 'application/x-www-form-urlencoded'
						},
						success(res) {
							resolve(res)
							var i=0;		
							var date;	
							var day;
							var allDayRoster=[];
							var oneDayRoster={};
							var rosters=[];
							var roster={}
							_this.list3=[];
							// console.log(res.data)
							//日期导航栏部分改变
							for(i=0;i<7;i++){
								date=res.data.data[i].date;
								day=parseInt(date.substr(8,1))*10+parseInt(date.substr(9,1))
								_this.list3.push(day);	
							}
							//放时间轴进入
							var xia=res.data.data;
							console.log(xia)
							var j;
							for(i=0;i<7;i++){
								if(xia[i].arrangeList!=null){
									rosters=[]
									oneDayRoster={}
									for(j=0;j<xia[i].arrangeList.length;j++){
										roster={}
										if(j==0){
											roster['startTime']=(parseInt(xia[i].arrangeList[j].startTime.substr(0,1))*10+parseInt(xia[i].arrangeList[j].startTime.substr(1,1))-4)/2+(parseInt(xia[i].arrangeList[j].startTime.substr(3,1))*10+parseInt(xia[i].arrangeList[j].startTime.substr(4,1)))/60
										}else{
											// roster['startTime']=(parseInt(xia[i].arrangeList[j].startTime.substr(0,1))*10+parseInt(xia[i].arrangeList[j].startTime.substr(1,1))-4)/2+(parseInt(xia[i].arrangeList[j].startTime.substr(3,1))*10+parseInt(xia[i].arrangeList[j].startTime.substr(4,1)))/60-(parseInt(xia[i].arrangeList[j-1].finishTime.substr(0,1))*10+parseInt(xia[i].arrangeList[j-1].finishTime.substr(1,1))-4)/2+(parseInt(xia[i].arrangeList[j-1].finishTime.substr(3,1))*10+parseInt(xia[i].arrangeList[j-1].finishTime.substr(4,1)))/60
											var a1=(parseInt(xia[i].arrangeList[j-1].finishTime.substr(0,1))*10+parseInt(xia[i].arrangeList[j-1].finishTime.substr(1,1))-4)/2+(parseInt(xia[i].arrangeList[j-1].finishTime.substr(3,1))*10+parseInt(xia[i].arrangeList[j-1].finishTime.substr(4,1)))/60
											var a2=(parseInt(xia[i].arrangeList[j].startTime.substr(0,1))*10+parseInt(xia[i].arrangeList[j].startTime.substr(1,1))-4)/2+(parseInt(xia[i].arrangeList[j].startTime.substr(3,1))*10+parseInt(xia[i].arrangeList[j].startTime.substr(4,1)))/60
											roster['startTime']=a2-a1
										}
										roster['S']=xia[i].arrangeList[j].startTime
										roster['F']=xia[i].arrangeList[j].finishTime
										roster['hours']=_this.dateToHours(xia[i].arrangeList[j].finishTime,xia[i].arrangeList[j].startTime)
										roster['departmentname']=xia[i].arrangeList[j].departmentname
										roster['color']=xia[i].arrangeList[j].color
										rosters.push(roster)
										// console.log(rosters)
									}
									oneDayRoster['rosters']=rosters
									allDayRoster.push(oneDayRoster)
								}else{
									console.log("没有排班")
									oneDayRoster=[]
									allDayRoster.push(oneDayRoster)
								}
							}
							_this.rosterColor=allDayRoster
							console.log(_this.rosterColor)
							// _this.changeaa();
						},
						fail: (err) => {
							uni.showToast({
								title:"请求接口失败",
								icon:"none"
							})
							reject(err)
						}
					})
				})	
			},
			changeaa(){
				console.log(this.list3)		
				// _this.$forceUpdate();
			},
			//接多人排班接口的地方
			getOtherInterFace:function(){
				return new Promise((resolve,reject)=>{
					const _this = this;
					uni.request({
						url:"http://47.99.124.245:8008/arrange/screen",
						method:'POST',
						data:{number:0,departmentid:0,managernumber:0,date:_this.rosterTime},
						header:{
							'content-type': 'application/x-www-form-urlencoded'
						},
						success(res){
							var today;
							var i=0;
							var j=0;
							var k=0;
							var linshi=[];
							var xiao={};//部门
							var xXiao={};//员工
							resolve(res)
							// console.log(res.data)
							today=res.data.data[_this.weekIndex].arrangeList
							// console.log(_this.weekIndex)
							console.log(res.data)
							
							if(today!=null){
								
								for(i=0;i<today.length;i++){
									// console.log(xiao)
									var poepleFlag=0;
									if(linshi.length==0){
										console.log("新增的第一个班")
										xiao['departmentname']=today[i]['departmentname']
										xiao['staffes']=[]
										xiao['color']=today[i]['color']
										xXiao['staffname']=today[i]['staffname']
										xXiao['number']=today[i]['number']
										xXiao['startTime']=today[i]['startTime']
										xXiao['finishTime']=today[i]['finishTime']
										xiao['staffes'].push(xXiao)
										linshi.push(xiao)
									}
									else{
										//如果部门编号一样，就看是不是员工有重复的
										var deflag=0
										// console.log(linshi.length)
										for(j=0;j<linshi.length;j++){
											if(today[i]['departmentname']==linshi[j]['departmentname']){
												//部门有重复
												
												console.log("部门有重复")
												deflag=1;
												for(k=0;k<linshi[j]['staffes'].length;k++){
													if(today[i]['staffname']==linshi[j]['staffes'][k].staffname){
														//如果人员有重复，那么就更新最早上班时间和最晚上下班时间
														console.log("同一部门人员有重复")
														poepleFlag=1
														if(_this.compareTime(linshi[j]['staffes'][k].startTime,today[i]['startTime'])){
															linshi[j]['staffes'][k].startTime=today[i]['startTime']
														}
														if(_this.compareTime(today[i]['finishTime'],linshi[j]['staffes'][k].finishTime)){
															linshi[j]['staffes'][k].finishTime=today[i]['finishTime']
														}
													}
												}
												if(poepleFlag==0){//如果人员没有重复，那么0就把新人员加到这个重复部门里面
													console.log("同一部门人员没有重复")
													xXiao={}
													xXiao['staffname']=today[i]['staffname']
													xXiao['number']=today[i]['number']
													xXiao['startTime']=today[i]['startTime']
													xXiao['finishTime']=today[i]['finishTime']
													// console.log(xXiao)
													linshi[j]['staffes'].push(xXiao)
													// console.log(linshi[j]['staffes'])
												}
											}
										}
										// console.log(deflag)
										//如果部门编号不一样，就增加新部门
										if(deflag==0){
											console.log("部门编号不重复")
											xiao={}
											xXiao={}
											xiao['departmentname']=today[i]['departmentname']
											xiao['staffes']=[]
											xiao['color']=today[i]['color']
											xXiao['staffname']=today[i]['staffname']
											xXiao['number']=today[i]['number']
											xXiao['startTime']=today[i]['startTime']
											xXiao['finishTime']=today[i]['finishTime']
											xiao['staffes'].push(xXiao)
											linshi.push(xiao)
											
										}
									}
								}
								// console.log(linshi)
							}else{
								console.log("今天没有排班")
							}
							_this.D=linshi
							// console.log(_this.D)
							// console.log("hahaha")
							// console.log(today)
							_this.$forceUpdate()
						},
						fail: (err) => {
							uni.showToast({
								title:"请求接口失败",
								icon:"none"
							})
							reject(err)
						}
					})
				})
			},
			compareTime(t1,t2){//如果t1大于t2则返回true
				var hours1=parseInt(t1.substr(0,1))*10+parseInt(t1.substr(1,1))
				var hours2=parseInt(t2.substr(0,1))*10+parseInt(t2.substr(1,1))
				var minues1=parseInt(t1.substr(3,1))*10+parseInt(t1.substr(4,1))
				var minues2=parseInt(t2.substr(3,1))*10+parseInt(t2.substr(4,1))
				if(hours1>hours2){
					return true;
				}else if(hours1==hours2){
					if(minues1>minues2){
						return true;
					}else if(minues1==minues2){
						return false;
					}else if(minues1>minues2){
						return false;
					}
				}else if(hours1<hours2){
					return false;
				}
			},
			topercent(e){
				var hour=0;
				hour=(e[0]*10+e[1]+(e[3]*10+e[4])/60);
				return hour;
			},
			dateToHours(finish,start){
				var hours=0;
				var fmin=0;
				var smin=0;
				var fhour=0;
				var shour=0;
				fhour=parseInt(finish[0])*10+parseInt(finish[1])
				shour=parseInt(start[0])*10+parseInt(start[1])
				fmin=parseInt(finish[3])*10+parseInt(finish[4])
				smin=parseInt(start[3])*10+parseInt(start[4])
				// hour=parseInt(finish[0])*10+parseInt(finish[1])
				if(fmin>smin){
					hours=fhour-shour+(fmin-smin)/60
				}else{
					hours=fhour-shour-1+(fmin+60-smin)/60
				}
				return hours;
			},
			setMonth(e){
				if(e==1){
					return "Jan";
				}else if(e==2){
					return "Feb";
				}else if(e==3){
					return "Mar";
				}else if(e==4){
					return "Apr";
				}else if(e==5){
					return "May";
				}else if(e==6){
					return "Jun";
				}else if(e==7){
					return "Jul";
				}else if(e==8){
					return "Aug";
				}else if(e==9){
					return "Sept";
				}else if(e==10){
					return "Oct";
				}else if(e==11){
					return "Nov";
				}else{
					return "Dec";
				}
			},
			showSelection(){
				if(this.show==true){
					this.show=false;
				}else{
					this.show=true;
				}
			},
			sectionChange(index) {
				this.curNow = index;
				if(index==1){
					this.display=true;
					// console.log(this.colorString);
					this.getOtherInterFace();
				}else{
					this.display=false;
				}
			},
			nexturl(number){
				console.log(number)
				console.log(this.rosterTime)
				let a={
					id:number,
					time:this.rosterTime,
					weekindex:this.weekIndex
				}
				uni.navigateTo({
					url:"OtherStaffTime/OtherStaffTime?addr="+JSON.stringify(a)
				})
			},
			sectionChange1(index) {
				this.curNOW1 = index;
			},
			getColer(color){
				return "../../static/Roster/"+color+".png";
			},
			
		},
		onLoad() {
			this.initTime();
			this.getInterFace();
			// console.log()
			// console.log(this.list3[0])
			// console.log(this.list3[1])
		}
	}
</script>
<style scoped>
	/deep/ .u-subsection{
		width: 270rpx;
		margin: 20rpx auto;
	}
	/deep/ .u-tabs-item{
		font-family: 'Georgia Normal', 'Georgia', sans-serif;
		margin: 0 auto;
		width: 95rpx;
	}
	
	/deep/ .u-tabs-scroll-box{
		margin: 0 auto;
		margin-left: 12.7% ;
	}
	/deep/ .u-tabs-scroll-box1{
		margin: 0 auto;
		margin-left: -33rpx ;
	}
	/deep/ .uni-collapse-item__title-img{
		width: 16rpx;
		height: 16rpx; 
	}
	/deep/ .uni-collapse-item__title-text{
		font-family: 'Merriweather', sans-serif;
		color: #333333;
	}
	/deep/ .uni-collapse-item__wrap-content{
		font-family: 'Merriweather', sans-serif;
		color: #333333;
	}

	/deep/ .uni-collapse-item__title-box{
		background-color: #f5f5f5;
/* 		border: solid 1rpx rgba(215, 215, 215, 0.71); */
	}
	/deep/ .uni-collapse-item__title.is-open.uni-collapse-item-border{
		background-color: #f5f5f5;
		/* border: solid 1rpx rgba(215, 215, 215, 0.71); */
	}
	/deep/ .uni-collapse-item__title.uni-collapse-item-border{
		background-color: #f5f5f5;
		/* border: solid 1rpx rgba(215, 215, 215, 0.71); */
	}
	/deep/ .uni-collapse-item-style{
		width: 100%;
		height: 80rpx;
		border: rgba(215, 215, 215, 0.71);
		font-size: 30rpx;
		font-family: 'Poppins', sans-serif;
		line-height: normal;
		line-height: 65rpx;
	}
	/deep/ .staffName{
		margin-left: 40rpx;
		
	}
	/deep/ .staffTime{
		margin-top: -63rpx;
		margin-left: 420rpx;
	}
	/deep/ .u-btn.u-line-1.u-fix-ios-appearance.u-size-default.u-round-circle.u-btn--primary{
		background-color: #ABC270;
	}
</style>
<style>
	.ico{
		width: 66rpx;
		height: 38rpx;
		opacity: 0.32;
		top: 95rpx;
		margin-left:-11% ;
	}
	.date{
		color: #4b7902;
		font-family: 'Arial Normal', 'Arial', sans-serif;
		font-weight: 700;
		text-align: left;
		line-height: normal;
		font-size: 40rpx;
		margin-left: 5%;
	}
	.icon{
		margin-top: 15rpx;
		margin-left: 15rpx;
		width: 30rpx;
		height: 34rpx;
	}
	.day{
		margin-left:6.7%;
	}
	.day1{
		margin-left: 50rpx;
	}
	.line{
	  float:right;
	  width: 100%;
	  height: 14rpx;
	  margin-top: 30rpx;
	  background:#e8e5e8;
	  position: relative;
	  text-align: center;
	}
	.circle {
		border-radius: 50%;
		width: 200px;
		height: 200px; 
	}
	.arrow {
		margin-top: -43rpx;
		margin-left: 670rpx;
	    width: 10px;
	    height: 10px;
	    border-top: 2px solid #abc270;
	    border-left: 2px solid #abc270;
	    transform: rotate(135deg);
	}
	/* page{
		background-color: #ffffff;
	} */
	.line1{
	  float:right;
	  width: 85%;
	  height: 3rpx;
	  margin-top: 90rpx;
	  background:#FFFFFF;
	  position: relative;
	  text-align: center;
	  opacity: 0.26;
	  border:1px dashed #797979
	  /* border-style:  dashed; */
	}
	.line2{
		float:right;
		width: 85%;
		height: 3rpx;
		margin-top: 90rpx;
		background:#797979;
		position: relative;
		text-align: center;
		opacity: 0.26;
		border:1px #797979
		
	}
	.u-sticky{
		margin-top: 0rpx;
		background-color: #FFFFFF;
	}
	.line3{
		float:left;
		position: relative;
		width: 3rpx;
		height: 2152rpx;
		margin-left: 110rpx;
		background:#797979;
		text-align: center;
		margin-top: -1952rpx;
		opacity: 0.26;
		border:1px dashed #797979;
	}
	.line4{
		float:left;
		position: relative;
		width: 2rpx;
		height: 2152rpx;
		margin-left: 88rpx;
		/* background:#797979; */
		text-align: center;
		margin-top: -1952rpx;
		opacity: 0.26;
		border:1px dashed #797979
	}
	.colorful{
		width: 88rpx;
		border-radius: 6px;
		opacity: 0.85;
		/* height: 720rpx; */
		margin-top: -620rpx;
		background-image: linear-gradient(-168.8178715379081deg, #abc270 0%, rgba(254, 200, 104, 0.82) 54.209654663407825%);
	}
	.time{
		font-family: 'Georgia Normal', 'Georgia';
		color: #473c33;
		font-size:28rpx;
	}
	.grriding{
		height: 2050rpx;
		width: 90%;
		background:#FFFFFF;
		background-image: linear-gradient(#e8e5e8 1px,transparent 0),/* //横线 */
							linear-gradient(90deg, #e8e5e8 1px,transparent 0),/* //竖线 */
							linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),
							            linear-gradient(90deg,hsla(0,0%,100%,.3) 1px,transparent 0);
		margin-top: 45%;
		margin-left: 12%;
		background-size:14% 50rpx;
	}
</style>
<style lang="scss" scoped>
	.slot-content {
			font-size: 30rpx;
			color: $u-content-color;
			padding-left: 30rpx;
			text-align: center;
			font-family: "Bodoni MT";
			line-height: 70rpx;
	}
</style>